<template>
	<view class="diy-screen">
		<view class="z-index">
			<view class="box">
				<view class="left" @click="diyScreen = !diyScreen">
					设备<text class="iconfont icon-xiala"></text>
				</view>
				<view class="right">
					<view class="r-item" :class="screenObj.task_sort_id == item.id ? 'r-item-hover' : ''" 
					v-for="(item,index) in list" :key="index" @click="select(item)">{{item.title}}</view>
				</view>
			</view>
			<view class="popupBox" v-if="diyScreen">
				<view class="title">设备</view>
				<view class="select">
					<view class="s-item" :style="{
						'background': screenObj.status == index? '#FF6F30' : 'none',
						'color':screenObj.status == index ? '#fff' : '#333',
						'border-color':screenObj.status == index ? 'none' : 'rgba(0,0,0,.1)',
					}" v-for="(item,index) in deviceList" :key="index" @click="screenObj.status = item.status">{{item.title}}</view>
				</view>
				<view class="btn-box">
					<view class="btn htnhover" @click="determine">确定</view>
					<view class="btn" @click="diyScreen = false">取消</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				list:[],
				diyScreen:false,
				screenObj:{
					status:0,
					task_sort_id:0,
				},
				deviceList:[{
					title:'全部',
					status:0
				},{
					title:'安卓',
					status:1
				},{
					title:'ios',
					status:2
				}]
			}
		},
		mounted() {
			this.getData();
		},
		methods:{
			select(item){
				this.screenObj.task_sort_id = item.id;
				this.$emit('determine',this.screenObj);
			},
			determine(){
				this.$emit('determine',this.screenObj);
				this.diyScreen = false;
			},
			getData(){
				this.$http.sendrequest('/task/TaskSortList').then(res=>{
					this.list = res.data;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.diy-screen{
		background-color: #fff;
		position: relative;
		.z-index{
			z-index: 999999;
		}
		.box{
			padding: 0 30rpx;
			border-bottom: 1rpx solid rgba(0,0,0,.1);
			display: flex;
			align-items: center;
			height: 80rpx;
			box-sizing: border-box;
			.left{
				font-size: 24rpx;
				margin-right: 40rpx;
				.icon-xiala{
					font-size: 34rpx;
					margin-left: 6rpx;
					transform: translateY(2rpx);
					position: relative;
					top:4rpx;
					color: rgba(0,0,0,.4);
				}
			}
			.right{
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 80rpx;
				.r-item{
					font-size: 24rpx;
					margin-left: 40rpx;
					position: relative;
				}
				.r-item-hover{
					color: rgb(255, 111, 48);
				}
				.r-item-hover::after{
					content:'';
					height: 4rpx;
					background: rgb(255, 111, 48);
					position: absolute;
					bottom: -16rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 100%;
				}
			}
		}
		.popupBox{
			width: 100%;
			background: #fff;
			position: absolute;
			left: 0;
			top: 80rpx;
			padding: 30rpx 0 0;
			box-sizing: border-box;
			z-index: 9999999;
			box-shadow: 0px 2px 6px 0px rgba(119, 119, 119, 0.2);
			.title{
				font-size:26rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
				margin: 0 30rpx;
			}
			.select{
				display: flex;
				align-items: center;
				margin: 30rpx 30rpx 0;
				.s-item{
					padding: 0 30rpx;
					height: 40rpx;
					border: 1rpx solid rgba(0,0,0,0.2);
					border-radius: 6rpx;
					font-size: 24rpx;
					margin-right:20rpx ;
				}
			}
			.btn-box{
				height: 100%;
				display: flex;
				align-items: center;
				margin: 30rpx 0 0;
				border-top: 1rpx solid rgba(0,0,0,.1);
				.htnhover{
					background: #FF6F30;
					color: #fff;
				}
				.btn{
					padding: 0 20rpx;
					height: 40rpx;
					text-align: center;
					line-height: 40rpx;
					font-size: 26rpx;
					margin-right: 20rpx;
					flex: 1;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
				}
			}
		}
		.fixed-box{
			min-height: 100vh;
			background: rgba(0,0,0,.3);
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
		}
	}
</style>